<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    function alertFun() {
      alert(123);
    }

    // console.log(React);
    /**
     * React.createElement()
     *  - 用来创建一个React元素
     *  - 参数：
     *      1、元素名(组件名),小写
     *      2、元素中的属性
     *          - class属性需要使用className来设置
     *          - 在设置事件时，属性名需要修改为驼峰命名法，例：onClick
     *      3、元素的子元素(内容)
     *
     */
    //创建一个React元素
    const button = React.createElement(
      "button",
      { className: "myButton", onClick: alertFun },
      "我是按钮"
    );

    const div = React.createElement(
      "div",
      { className: "myDiv div", disabled: true },
      "我是react创建的div",
      button
    );
    console.log("div:", div);

    // 获取根元素对应的React元素
    // ReactDOM.createRoot() 用来创建React根元素，需要一个DOM元素作为参数
    const Root = ReactDOM.createRoot(document.getElementById("root"));
    console.log("Root:", Root);

    // 将div渲染到根元素中
    Root.render(div);
  </script>
</html>
